<template>
  <div>
    <videoPlay
        v-bind="options"
        poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
    />
  </div>
</template>

<script>
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
export default {
  name:'custom-vue3-video-play',
  components: {
    videoPlay,
  },
  props:{
    src:{
      type: String,
      default:'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4'
    },
    isControl:{
      type:Boolean,
      default: true
    },
    isSpeed:{
      type:Boolean,
      default: true
    }
  },
  data(){
    return{
      options:{
        width: "800px", //播放器高度
        height: "450px", //播放器高度
        color: "#409eff", //主题色
        title: "", //视频名称
        src: this.src, //视频源
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: true, //自动播放
        loop: true, //循环播放
        mirror: false, //镜像画面
        ligthOff: false, //关灯模式
        volume: 0.3, //默认音量大小
        speed:this.isSpeed,
        control: this.isControl, //是否显示控制
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
      }
    }
  }
}
</script>

<style scoped></style>
